<template>
	<div>
		<el-container style="height: 500px; border: 1px solid #eee;text-align: left;">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu :default-openeds="['1', '3']">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-message"></i>超级管理员</template>
						<el-menu-item index="1-3" @click="test">权限1</el-menu-item>
						<el-submenu index="1-4">
							<template slot="title">权限2</template>
							<el-menu-item index="1-4-1">权限2-1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-menu"></i>普通用户</template>

						<el-menu-item index="2-1">权限3</el-menu-item>
						<el-menu-item index="2-2">权限4</el-menu-item>

					</el-submenu>
					<el-submenu index="3">
						<template slot="title"><i class="el-icon-setting"></i>游客</template>
						<el-menu-item index="3-1">权限5</el-menu-item>
						<el-menu-item index="3-2">权限6</el-menu-item>
						<el-menu-item index="3-3">权限7</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>查看</el-dropdown-item>
							<el-dropdown-item>新增</el-dropdown-item>
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>王小虎</span>
				</el-header>

				<el-main>
					<el-table :data="tableData">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="140">
						</el-table-column>
						<el-table-column prop="phone" label="手机号码" width="170">
						</el-table-column>
						<el-table-column prop="email" label="邮箱" width="180">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'sideBar',
		data() {
			return {
				tableData: []
			}
		},
		methods: {
			test() {
				this.$axios.get('/test').then(res => {
					console.log(res)
				}).catch(e => {
					this.$message.error("未登录，请先登录")
					this.$router.push("/login")
				})
			},
			getUser() {
				this.$axios.get("/getAll").then(res => {
					console.log(res)
					this.tableData = res.data;
				})
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}
		},
		created() {
			this.getUser();
		}
	};
</script>

<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
